<template>
	<view class="">
		<!-- 安全中心 -->
		<view
			class="promotion-safe-center"
			:style="{ left: safeCenterPosition.x + 'px', top: safeCenterPosition.y + 'px' }"
			@touchstart="onTouchStart"
			@touchmove="onTouchMove"
			@touchend="onTouchEnd"
		>
			<image style="margin-bottom: 20rpx" class="safe-cion" src="/static/home/safe.png" @click.stop="handleSafeClick"></image>
			<!-- <image class="share-cion" src="/static/home/share.png" @click.stop="handleShareClick"></image> -->
			<view style="position: relative">
				<view
					v-if="num"
					style="
						position: absolute;
						top: -10rpx;
						right: -10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: red;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						color: #fff;
						z-index: 1;
						font-size: 0.8em;
					"
				>
					{{ num < 10 ? num : '9+' }}
				</view>
				<image style="margin-bottom: 0; width: 98rpx; height: 98rpx" class="safe-cion" src="/static/xx.png" @click.stop="onXx"></image>
			</view>
		</view>
		<!-- 分享引导蒙层 -->
		<share-guide :show.sync="showGuide" :shareData="shareData"></share-guide>
	</view>
</template>

<script>
import shareGuide from '@/pages/common/ShareGuide.vue';
import { isLoggedIn } from '@/utils/auth';
let timer = null;
export default {
	components: {
		shareGuide
	},
	data() {
		return {
			isDragging: false, // 是否正在拖拽
			showGuide: false,
			shareData: {
				title: '拼车出行，绿色环保',
				desc: '发现更多拼车路线，省钱又环保',
				link: '',
				imageUrl: 'https://carpool.mszcdf.cn/static/logo.png'
			},
			num: 0,
			safeCenterPosition: { x: 0, y: 0 } // 安全中心按钮位置
		};
	},
	mounted() {
		this.initSafeCenterPosition();
		this.getNum();
	},
	methods: {
		getNum() {
			clearTimeout(timer);
			if (!isLoggedIn()) {
				timer = setTimeout(() => {
					this.getNum();
				}, 5000);
			} else {
				this.$http
					.get('/h5/user/getMessage')
					.then((res) => {
						console.log(res, '**********');
						this.num = res.data;
					})
					.finally(() => {
						timer = setTimeout(() => {
							this.getNum();
						}, 5000);
					});
			}
		},
		onXx() {
			uni.navigateTo({
				url: '/pages/home/mssge'
			});
		},
		onTouchStart(e) {
			this.touchStartX = e.touches[0].clientX;
			this.touchStartY = e.touches[0].clientY;
			this.isDragging = true;
		},
		// 初始化安全中心按钮位置
		initSafeCenterPosition() {
			const systemInfo = uni.getSystemInfoSync();

			// 尝试从本地存储恢复位置
			const savedPosition = uni.getStorageSync('safeCenterPosition');
			if (savedPosition && savedPosition.y !== undefined) {
				// 验证Y位置是否在屏幕范围内
				const maxY = systemInfo.windowHeight - 240;

				if (savedPosition.y >= 0 && savedPosition.y <= maxY) {
					// 恢复Y位置，X位置固定在右侧
					this.safeCenterPosition = {
						x: systemInfo.windowWidth - 128,
						y: savedPosition.y
					};
					return;
				}
			}

			// 默认位置在右下方
			this.safeCenterPosition = {
				x: systemInfo.windowWidth - 68,
				y: systemInfo.windowHeight - 100 // 距离底部100px
			};
		},

		onTouchMove(e) {
			if (!this.isDragging) return;

			const deltaY = e.touches[0].clientY - this.touchStartY;

			// 只允许垂直方向拖拽，X坐标永远固定在右侧边缘
			const systemInfo = uni.getSystemInfoSync();
			const fixedX = systemInfo.windowWidth - 68; // 永远固定在右侧
			let newY = this.safeCenterPosition.y + deltaY;

			// 边界限制 - 只限制Y轴，确保按钮不会超出屏幕
			const maxY = systemInfo.windowHeight - 100; // 按钮高度

			if (newY < 0) newY = 0;
			if (newY > maxY) newY = maxY;

			// 强制设置位置，确保X坐标永远在右侧
			this.safeCenterPosition = {
				x: fixedX,
				y: newY
			};

			// 更新起始位置，实现连续拖拽
			this.touchStartX = e.touches[0].clientX;
			this.touchStartY = e.touches[0].clientY;
		},
		onTouchEnd() {
			this.isDragging = false;
			// 可以在这里保存位置到本地存储
			uni.setStorageSync('safeCenterPosition', this.safeCenterPosition);
		},
		// 处理安全中心点击
		handleSafeClick() {
			if (!this.isDragging) {
				uni.navigateTo({
					url: '/pages/home/safeCenter/index'
				});
			}
		},
		// 处理分享点击
		handleShareClick() {
			if (!this.isDragging) {
				this.showGuide = true;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.promotion-safe-center {
	width: 128rpx;
	height: 240rpx;
	background: #ffffff;
	// box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
	box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.4), 0 8px 22px 0 rgba(0, 0, 0, 0.39);
	border-radius: 64rpx 64rpx 64rpx 64rpx;
	position: fixed;
	right: 0;
	bottom: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 999;
	user-select: none;
	touch-action: none;
}
.promotion-safe-center .safe-cion {
	width: 88rpx;
	height: 88rpx;
	margin-bottom: 24rpx;
}
.promotion-safe-center .share-cion {
	width: 88rpx;
	height: 88rpx;
}
</style>
